//引入样式
require('../less/sportsing.less')

//引入文字样式
require('../fonts/iconfont.css')




//文档加载事件

document.ready(function () {
    //获取数据
    const countDownText = document.querySelector('#countDownText')
    const motion = document.querySelector('#motion')
    const countdown = document.querySelector('#countdown')

    const btnStop = document.querySelector('#btnStop')//暂停
    const btnContinue = document.querySelector('#btnContinue')//继续
    const btnOver = document.querySelector('#btnOver')//结束


    const runTime = document.querySelector('#runTime')//用时--运动中
    const useTime = document.querySelector('#useTime')//用时--地图



    const showMap = document.querySelector('#showMap')//地图按钮
    const mapModal = document.querySelector('#mapModal')//地图



    const back = document.querySelector('#back')//返回
    const sucess = document.querySelector('#sucess')//完成


    const sportKm = document.querySelector('#sportKm')//运动公里--运动中
    const sportsKilometre = document.querySelector('#sportsKilometre')//运动公里--地图

    const speed = document.querySelector('#speed')//配速--运动中
    const speedAllocation = document.querySelector('#speedAllocation')//配速--地图

    const calorie = document.querySelector('#calorie')//卡路里--运动中
    const calorieConsumption = document.querySelector('#calorieConsumption')//卡路里--地图





    //定义数据
    let timer = null;//接收计时器
    let initTime = 0 //初始时间
    const map = new BMap.Map("amap");//实例化地图对象
    let interval = 0.0001 //经纬度间隔
    let pointArr = []; //经纬度的数组
    let count = 0 //添加的次数

    let allDistance = 0; //运动距离
    let kale = 0; //卡路里

    //计时器go
    function countDown() {
        let num = 3;
        setInterval(function () {
            num--;
            if (num == 0) {
                countDownText.textContent = 'GO'
            } else if (num == -1) {
                countDownText.style.display = 'none'
                motion.style.display = 'flex'
            } else {
                countDownText.textContent = num;
            }
        }, 1000)

        startDoingExercise()
    }
    countDown()


    //btnStop暂停
    btnStop.addEventListener('click', function () {

        btnStop.style.display = 'none'
        btnContinue.style.display = 'flex'
        btnOver.style.display = 'flex'

        //接收定时器
        clearInterval(timer)
    })


    //btnContinue继续
    btnContinue.addEventListener('click', function () {

        btnStop.style.display = 'flex'
        btnContinue.style.display = 'none'
        btnOver.style.display = 'none'

        //继续计时
        startDoingExercise()
    })


    //btnOver结束
    btnOver.addEventListener('click', function () {

        mapModal.style.display = 'block'
        sucess.style.display = 'block'
        back.style.display = 'none'
        motion.style.display = 'none'
        countdown.style.display = 'none'

    })

    //返回
    back.addEventListener('click', function () {
        mapModal.style.display = 'none'
        motion.style.display = 'flex'
    })


    //开始运动
    function startDoingExercise() {
        timer = setInterval(function () {
            ++initTime  //运动时间自增
            runTime.textContent = until.formatTime(initTime); // 渲染运动时间
            useTime.textContent = until.formatTime(initTime); // 渲染运动时间

            getCurPosition()//动态获取经纬度
        }, 1000)
    }

    //显示地图页
    showMap.addEventListener('click', function () {
        mapModal.style.display = 'block'
        back.style.display = 'block'
        motion.style.display = 'none'
        countdown.style.display = 'none'
    })






    // 动态获取当前的定位(经纬度)

    function getCurPosition() {
        const geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {


                //定位成功
                interval += 0.0001

                let lng = parseFloat(r.longitude) + interval
                let lat = parseFloat(r.latitude) + interval
                const point = new BMap.Point(lng, lat); //定义地图中心点
                map.centerAndZoom(point, 15); //设置中心点坐标和地图级别

                //将当前经纬度添加到数组中
                pointArr.push({
                    lng,
                    lat
                })

                ++count// 添加的次数


                //画起点
                if (count === 1) {
                    until.addMarker(map, pointArr[0], require('../imgs/start.png'))
                }

                /**
                 * 计算总的运动距离
                 */
                let allDistance = 0;//定义变量保存最终的距离
                //遍历
                for (let i = 0; i < pointArr.length - 1; i++) {
                    let start = pointArr[i] //第一个点
                    let next = pointArr[i + 1]//第二个点
                    //console.log( start, next);
                    //console.log( until.calcDistance(start, next) );
                    allDistance += parseFloat(until.calcDistance(start, next))


                    //画线
                    until.addPolyLine(map, start, next)
                }

                //得到总的运动距离
                sportKm.textContent = allDistance.toFixed(2)
                sportsKilometre.textContent = allDistance.toFixed(2)


                /**
                 * 计算配速
                 */
                speed.textContent = until.calcPace(allDistance, initTime)
                speedAllocation.textContent = until.calcPace(allDistance, initTime)

                /**
                 * 计算卡路里
                 */
                calorie.textContent = until.calCalorie(allDistance)
                calorieConsumption.textContent = until.calCalorie(allDistance)

            }
            else {
                alert('定位不成功')
            }
        });
    }

    //完成及保存数据
    sucess.addEventListener('click', function () {


        const params = {
            id: localStorage.getItem('userId'),//用户id
            type: 1, //跑步
            takeTime: +allDistance.toFixed(2),//运动距离
            miles: +(allDistance / initTime).toFixed(2),//平均速度 - 配速
            averagerate: initTime, //运动时间
            calorie: +kale,//卡路里
        }


        //发请求
        $http.post('/sports/save', params, function (res) {
            location.href="./running.html"
        })
    })

})